<script setup>
import { defineEmits, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getOrderDetailApi } from '@/apis/order'
const route = useRoute()
const orderNo = route.params.orderNo

const emit = defineEmits(['title'])
emit('title', '订单详情')

const orderDetail = ref({})
const getOrderDetail = async () => {
  const res = await getOrderDetailApi(orderNo)
  orderDetail.value = res.data.data
}
getOrderDetail()
</script>

<template>
  <div class="page">
    <el-card style="max-width: 100%">
      <template #header>
        <div class="card-header">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-card style="width: 100%" shadow="hover">
                <template #header>
                  <div class="card-header-title">订单状态</div>
                </template>
                <div class="card-header-content">
                  <el-tag v-if="orderDetail.orderStatus === 1" type="success"
                    >待配货</el-tag
                  >
                  <el-tag
                    v-else-if="orderDetail.orderStatus === 2"
                    type="primary"
                    >待出库</el-tag
                  >
                  <el-tag v-else-if="orderDetail.orderStatus === 3" type="info"
                    >派送中</el-tag
                  >
                  <el-tag
                    v-else-if="orderDetail.orderStatus === 4"
                    type="success"
                    >交易成功</el-tag
                  >
                  <el-tag v-else-if="orderDetail.orderStatus < -1" type="danger"
                    >手动关闭</el-tag
                  >
                  <el-tag
                    v-else-if="orderDetail.orderStatus === -2"
                    type="danger"
                    >超时关闭</el-tag
                  >
                  <el-tag
                    v-else-if="orderDetail.orderStatus === -3"
                    type="danger"
                    >商家关闭</el-tag
                  >
                </div>
              </el-card>
            </el-col>

            <el-col :span="8">
              <el-card style="width: 100%" shadow="hover">
                <template #header>
                  <div class="card-header-title">订单号</div>
                </template>
                <div class="card-header-content">
                  <span>{{ orderDetail.orderNo }}</span>
                </div>
              </el-card>
            </el-col>

            <el-col :span="5">
              <el-card style="width: 100%" shadow="hover">
                <template #header>
                  <div class="card-header-title">总价</div>
                </template>
                <div class="card-header-content">
                  <span style="color: red">￥{{ orderDetail.totalPrice }}</span>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card style="width: 100%" shadow="hover">
                <template #header>
                  <div class="card-header-title">创建时间</div>
                </template>
                <div class="card-header-content">
                  {{ orderDetail.createTime }}
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-card style="margin-top: 20px">
          <el-descriptions title="收货信息">
            <el-descriptions-item label="收货人：">
              {{ orderDetail.address?.userName }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话：">
              {{ orderDetail.address?.userPhone }}
            </el-descriptions-item>
            <el-descriptions-item label="收货地址：">
              {{
                orderDetail.address?.provinceName +
                '/' +
                orderDetail.address?.cityName +
                '/' +
                orderDetail.address?.regionName +
                '/' +
                orderDetail.address?.detailAddress
              }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </template>
      <el-table :data="orderDetail.orderItemList" style="width: 100%">
        <el-table-column prop="goodsImage" label="商品图片" width="180">
          <template #default="scope">
            <img
              :src="scope.row.goodsImage"
              style="width: 6rem; height: 6rem"
            />
          </template>
        </el-table-column>
        <el-table-column prop="goodsId" label="商品编号" width="180" />
        <el-table-column prop="goodsName" label="商品名字" />
        <el-table-column prop="goodsCount" label="商品数量" />
        <el-table-column prop="sellingPrice" label="商品价格" />
      </el-table>
    </el-card>
  </div>
</template>

<style lang="scss" scoped></style>
